<template>
  <div class="flex flex-col gap-4 justify-start card">
    <h1 class="font-bold">
      iconify (<a href="https://github.com/iconify/iconify" target="_blank">https://github.com/iconify/iconify</a>)
    </h1>
    <div class="flex gap-4">
      <div class="flex flex-col items-center gap-2 p-4 border rounded">
        <i-mdi-account />
        <span class="text-sm">&lt;i-mdi-account /&gt;</span>
      </div>
      <div class="flex flex-col items-center gap-2 p-4 border rounded">
        <i-mdi:account />
        <span class="text-sm">&lt;i-mdi:account /&gt;</span>
      </div>

      <i-carbon-settings />
      <i-ep-edit />
    </div>
    <div class="flex gap-4">
      <h2 class="font-bold">PrimeIcons</h2>
      <i class="pi pi-check"></i>
      <i class="pi pi-times"></i>
      <span class="pi pi-search"></span>
      <span class="pi pi-user"></span>
      常量引用：{{ PrimeIcons.DOWNLOAD }}
    </div>
    <div class="flex gap-4">
      <!-- PrimeIcons 图标 -->
      <i-prime:check />
      <i-prime:times />
      <i-prime:search />

      <!-- 混合使用 -->
      <i-prime:user />
      <i-mdi:account />
      <i-ep:edit />
    </div>
    <div class="flex gap-4">
      <!-- unplugin-icons 方式 -->
      <i-prime:check />

      <!-- PrimeVue 原生方式 -->
      <i class="pi pi-check"></i>
    </div>
    <div class="flex gap-4">
      <h2 class="font-bold">本地svg</h2>
      <div class="mt-5px flex-x-center">
        <SvgIcon local-icon="activity" class="text-red-500" />
      </div>
    </div>
    <div class="flex gap-4">
      <h2 class="font-bold">内联 SVG 嵌入在 dom 内部</h2>
      <div class="mt-5px flex-x-center w-6 h-6">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%">
          <g id="chevron-down">
            <path
              d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"
            />
          </g>
        </svg>
      </div>
    </div>
    <h2 class="font-bold">本地svg图标预览</h2>
    <div class="flex gap-4">
      <div class="grid grid-cols-10 gap-4 p-4">
        <div v-for="icon in icons" :key="icon" class="flex flex-col items-center gap-2 p-4 border rounded">
          <SvgIcon :local-icon="icon" class="w-6 h-6" />
          <span class="text-sm">{{ icon }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { PrimeIcons } from '@primevue/core/api'
  const icons = ref<string[]>([])
  onMounted(async () => {
    // 获取所有图标文件名
    const modules = import.meta.glob('@/assets/icons/*.svg')
    icons.value = Object.keys(modules)
      .map(key => {
        const match = key.match(/([^/]+)\.svg$/)
        return match ? match[1] : ''
      })
      .filter(Boolean)
  })
</script>
<style lang="scss" scoped></style>
